<template>
  <div class="app-layout">
    <!-- 页面头部 -->
    <Header />
    
    <!-- 主要内容区域 -->
    <main class="main-content">
      <slot />
    </main>
    
    <!-- 页面底部 -->
    <Footer />
    
    <!-- 回到顶部按钮 -->
    <BackToTop />
  </div>
</template>

<script setup lang="ts">
// Nuxt 会自动导入 components 目录下的组件，无需手动导入

// 页面元数据
useHead({
  bodyAttrs: {
    class: 'app-body'
  }
})
</script>

<style scoped>
.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding-top: 0; /* 移除固定的padding，让内容可以全屏显示 */
  min-height: calc(100vh - 80px);
}

/* 确保页面内容不被固定头部遮挡 */
@media (max-width: 768px) {
  .main-content {
    padding-top: 0;
  }
}
</style>

<style>
/* 全局样式，不使用 scoped */
.app-body {
  margin: 0;
  padding: 0;
}
</style>